import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function PropertyFee({ data = {} }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!data.x || !data.y) return;
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: data.x,
        axisLabel: { color: '#fff' }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' }
      },
      series: [
        {
          data: data.y,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { color: '#00eaff', width: 3 },
          itemStyle: { color: '#00eaff' },
          areaStyle: { color: 'rgba(0,234,255,0.15)' }
        }
      ]
    });
    return () => chart.dispose();
  }, [data]);

  return (
    <div style={{ width: '100%', height: 300 }}>
      <div style={{ color: '#00eaff', fontWeight: 700, fontSize: 16, marginBottom: 8 }}>物业费收款情况</div>
      <div ref={chartRef} style={{ width: '100%', height: 250 }} />
    </div>
  );
} 